<template >
     <div id="divPosition">
        <span class="navigation">
            <li v-for="news in newsList">
                <RouterLink :to="{
                    path: '/news/details',
                    query:{id:news.id,title:news.title,content:news.content}
                }" >{{ news.title }}<br></RouterLink>
            </li>
        </span>
        <span class="content"><RouterView/></span>
    </div>
</template>

<script lang="ts">
export default {
    name:'News'
}
</script>

<script setup lang="ts">
import { RouterView } from 'vue-router';
let newsList = [{ id: 1, title: '一只狗', content: '漂亮小狗狗' },
            { id: 2, title: '震惊', content: '哈哈哈' }]
</script>

<style lang="css">
    #divPosition{
        display: flex;
    }
    .navigation{
        border: 1px solid black;
        width: 100px;
        height: 400px;
        background-color: blanchedalmond;
        margin-top: 50px;
         margin-left: 20px;
         margin-right: 20px;
    }
    .navigation li{
        margin-left: 20px;
    }
    .content{
        border: 1px solid black;
        width: 400px;
        height: 400px;
        margin-top: 50px;
    }
</style>